<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>待办列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #ccc;
    }

    ul {
      list-style: none;
    }

    li {
      padding: 20px;
      text-align: left;
      font-size: 30px;
      border-bottom: 1px dashed #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    li input {
      margin-right: 10px;
    }

    li button {
      display: none;
      padding: 5px;
    }

    li:hover button {
      display: inline-block;
      cursor: pointer;
    }

    .chk:checked+span {
      text-decoration: line-through;
    }

    h1 {
      margin-bottom: 10px;
    }

    .box {
      background-color: #fff;
      width: 60vw;
      padding: 20px 20px 0;
      margin: 50px auto;
    }

    .box .tool input {
      width: 100%;
      height: 50px;
      text-indent: 20px;
      font-size: 20px;
      font-style: italic;
      color: #666;
      font-weight: 700;
    }

    section {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    a {
      text-decoration-color: #666;
      color: inherit;
    }
  </style>
</head>

<body>
  <div id="app" data-v-app="">
    <div class="box">
      <h1>待办列表</h1>
      <div class="tool">
        <input autofocus="" type="text" placeholder="请输入代办事项" class="word" />
      </div>
      <ul>

      </ul>
      <section>
        <span><i>1</i> 未完成</span><a href="#">清理 <b>0</b> 已完成</a>
      </section>
    </div>
  </div>
  <script>

    // 获取dom标签元素
    const word = document.querySelector('.word');
    const ul = document.querySelector('ul');
    const i = document.querySelector('i');
    const b = document.querySelector('b');
    const a = document.querySelector('a');

    // 声明对象存储数据
    let list = [
      {
        work: '吃饭',
        checked: true,
      },
      {
        work: '打游戏',
        checked: false,
      },
    ];

    // 定义函数，根据数组来渲染li标签
    function renderHtml() {
      // 由数组拼接标签
      const html = list
        .map(function (value, index) {
          const prop = value.checked ? 'checked' : '';
          return `<li><div>
            <input type="checkbox" ${prop} data-index="${index}" class="chk">${value.work}</div>
            <button class="delete" data-index="${index}">X</button></li>`;
        }).join(" ");
      ul.innerHTML = html;

      // 使用css样式完成状态统计
      // 获取总数
      const length = list.length;
      const checkedNum = document.querySelectorAll('[type=checkbox]:checked').length;
      const unCheckedNum = length - checkedNum;
      // 将统计到的值放到对应的标签中
      i.innerText = unCheckedNum;
      b.innerText = checkedNum;
    };
    renderHtml();

    // 输入框键盘回车抬起事件
    word.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        const obj = {
          work: word.value,
          checked: false,
        }
        // 添加至数组中
        list.push(obj);
        // 调用函数，重新渲染页面
        renderHtml();
      }
    });

    // 删除按钮给ul注册事件委托
    ul.addEventListener('click', function (e) {
      if (e.target.classList.contains('delete')) {
        // 获取自定义属性
        const index = e.target.dataset.index;
        // 执行数组删除元素
        list.splice(index, 1);
        // 调用函数，重新渲染页面
        renderHtml();
        // 当点击到input标签时，把checked值做取反操作
      } else if (e.target.classList.contains('chk')) {
        const index = e.target.dataset.index;
        list[index].checked = !list[index].checked;
        renderHtml();
      }
    })

    // 清理按钮鼠标点击事件绑定
    a.addEventListener('click', function (e) {
      // 新数组
      let newlist = [];
      // 对旧数组做遍历
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        if (!element.checked) {
          // 把未完成的任务添加到新数组中
          newlist.push(element);
        }
      }
      // 把新数组的值赋给旧数组
      list = newlist;
      // 调用函数，重新渲染页面
      renderHtml();
    });
  </script>
</body>

</html>